<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            color: rgb(115, 188, 32);
            text-shadow: 2px 2px pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <h3 v-power="num"></h3>
        <input type="text" v-focus="num" :value="num">
        <button @click='unBind'>给自定义指令解绑</button>
        <button @click="num++">加加{{num}}</button>
        <button @click="handleBus">事件总线</button>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let bus = new Vue();
    console.log(bus);
    let vm = new Vue({
        el:'#app',
        data() {
            return {
                msg: 'Hello World',
                num: 10
            }
        },
        watch:{
            num:{
                handler(newVal,oldVal){
                    console.log(newVal,oldVal);
                },
                immediate: true
            }
        },
        directives:{
            power:{
                bind(el,{value}){
                    // console.log(el,value);
                    el.innerText = value;
                    el.className = 'active'
                },
                inserted(el,{value}){
                    // console.log(el,value);
                },
                update(el,{value}){
                    el.innerText = value;
                },
                unbind(el,value){
                    // console.log('解绑成功+1');
                    el.className = '';
                }
            },
            focus:{
                bind(el,{value}){
                    // console.log(el,value);
                },
                inserted(el,{value}){
                    // console.log(el.$inp);
                    el.focus();
                },
                update(el,{value}){
                    // console.log(el,value);
                },
                unbind(el,value){
                    // console.log('解绑成功+2');
                }
            }
        },
        methods: {
            unBind(){
                this.$destroy();//给vue自定义指令解绑的方法
            },
            handleBus(){
                bus.$emit('test',this.msg)
            }
        },
        mounted() {
            bus.$on('test',(data)=>{
                console.log(data);
            })
        },
    })
</script>
</html>